<script setup name="Question">
import Info from './info.vue'
import {deleteApi, pageApi, saveApi, updateApi} from "@/api/practice/question";
import {reactive} from "vue";

const {proxy} = getCurrentInstance();

// 表单状态
const filterState = ref(true)
// 表单数据
const multiple = ref(true);
const total = ref(0);
const isupdate = ref(false);
const dataList = ref([]);
const formData = ref({
  contents:[],
  edate: '',
  info: '',
  sdate: '',
  title: ''
})
const add_or_edit_state = ref(false);
const queryParams = ref({
  pageNum: 1,
  pageSize: 10
});
const dateRange=ref([])//el-date-picker组件保存是数组
const ids = ref([]);
onMounted(()=>{
  loadData()
})
//请求 查询接口
const formRules = reactive({
  title: [
    {required: true, message: '请输入用户名', trigger: 'blur'},
    {min: 2, max: 6, message: '请输入2~6个字符', trigger: 'blur'}
  ]
})
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.id);
  multiple.value = !selection.length;
}

function loadData(){
  if(dateRange.value&&dateRange.value.length){
    //赋值
    queryParams.value.sdate=dateRange.value[0]
    queryParams.value.edate=dateRange.value[1]
  }
  pageApi(queryParams).then(response =>{
    dataList.value = response.rows;
    total.value = response.total;
  })
}

//编辑或者新增修改时
function onSubmit() {
  proxy.$refs["formRef"].validate(valid => {
    if (valid) {
      if (isupdate.value) {
        updateApi(formData.value).then(response => {
          proxy.$modal.msgSuccess(isupdate.value ? "修改问卷成功" : "新增问卷成功")
          loadData()
          add_or_edit_state.value = false
        })
      } else {
        saveApi(formData.value).then(response => {
          proxy.$modal.msgSuccess(isupdate.value ? "修改问卷成功" : "新增问卷成功")
          loadData()
          add_or_edit_state.value = false
        })
      }
    }
  });
}

// 编辑
const infoRef = ref()
const onUserInfo = (row) => {
  add_or_edit_state.value = true
  isupdate.value = true
  if (row) {
    Object.assign(formData.value,row)
    formData.contents = row.content.split(',')
  }
}

function handleDelete(row) {
  const quetionIds = row.id || ids.value;
  proxy.$modal.confirm('是否确认删除？').then(function() {
    return deleteApi(quetionIds);
  }).then(() => {
    loadData()
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => {});
}



//新增的操作
const skipToAdd =  () => {
  console.log("我是添加，我被执行了")
  add_or_edit_state.value = true
  isupdate.value = false
}
loadData()
</script>
<template>
<!--  <Info ref="infoRef" @flush="loadData"/>-->
  <div class="app-container">
      <!-- 逻辑层 -->

      <!-- 逻辑层 -->
    <el-card class="box-card">
      <!-- 筛选 -->
        <el-form :inline="true" v-if="filterState">
          <el-form-item label="问卷标题">
            <el-input placeholder="请输入问题标题" v-model="queryParams.title" />
          </el-form-item>
          <el-form-item label="问题日期">
            <el-date-picker
                value-format="YYYY-MM-DD"
                v-model="dateRange"
                type="daterange"
                range-separator="到"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="loadData"> <span class="iconfont icon-sousuo"></span>搜索 </el-button>
            <el-button type="default"> 重置 </el-button>
          </el-form-item>
        </el-form>
      <!-- 筛选 -->
      <!-- 内容 -->
      <!-- 按钮组 -->
      <el-row class="mb8">
        <el-col :span="12">
          <el-button type="primary" @click="skipToAdd">
            <span class="iconfont icon-jiahao"></span>新增
          </el-button>
          <el-button type="danger"  @click="handleDelete" :disabled="multiple">
            <span class="iconfont icon-shanchu"></span>批量删除
          </el-button>
        </el-col>
      </el-row>
      <!-- 按钮组 -->
      <!-- 表格 -->
      <el-table :data="dataList" :border="true" @selection-change="handleSelectionChange" >
        <el-table-column type="selection" align="center" fixed="left"></el-table-column>
        <el-table-column label="序号" prop="id" align="center" width="60"></el-table-column>
        <el-table-column label="问卷标题" prop="title" align="center" width="200"></el-table-column>
        <el-table-column label="开始日期" prop="sdate" align="center" width="150"></el-table-column>
        <el-table-column label="结束日期" prop="edate" align="center" width="150"></el-table-column>
        <el-table-column label="问卷内容" prop="content" align="center" ></el-table-column>
        <el-table-column label="创建时间" prop="ctime" align="center" width="200"></el-table-column>
        <el-table-column label="操作" align="center" width="220" fixed="right">
          <template #default="scoped">
            <el-button type="primary" link size="small" @click="onUserInfo(scoped.row)">
              <span class="iconfont icon-bianji"></span>修改
            </el-button>
            <el-button type="primary" link size="small" @click="handleDelete(scoped.row)">
              <span class="iconfont icon-shanchu"></span>删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 表格 -->
      <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="loadData"
      />
    </el-card>

    <!-- 新增/修改问题   -->
    <el-dialog
        v-model="add_or_edit_state"
        :title="`${isupdate ? '修改' : '添加'} 调查问卷`"
        width="600"
        :before-close="() => (add_or_edit_state = false)"
    >
      <!-- 内容 -->
      <el-form
          v-if="add_or_edit_state"
          size="large"
          label-width="80"
          :model="formData"
          :rules="formRules"
          ref="formRef"
      >
        <el-form-item label="问卷标题">
          <el-input placeholder="请输入问卷标题" v-model="formData.title"/>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="开始日期">
              <el-date-picker
                  v-model="formData.sdate"
                  value-format="YYYY-MM-DD"
                  type="date"
                  placeholder="请选择开始日期"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结束日期">
              <el-date-picker
                  v-model="formData.edate"
                  value-format="YYYY-MM-DD"
                  type="date"
                  placeholder="请选择结束日期"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="问卷说明">
          <el-input type="textarea" placeholder="请输入问卷说明" v-model="formData.info" :rows="3"/>
        </el-form-item>


<!--        <el-form-item label="问卷图片">-->
<!--          <el-upload-->
<!--              class="avatar-uploader"-->
<!--              action="http://localhost:8080/api/question/upload"-->
<!--              :show-file-list="false"-->
<!--              :on-success="handleAvatarSuccess"-->
<!--          >-->
<!--            <img v-if="imageUrl" :src="imageUrl" class="dvimg" />-->
<!--            <el-icon v-else class="avatar-uploader-icon">+</el-icon>-->
<!--          </el-upload>-->
<!--        </el-form-item>-->
        <!--  修改-->
        <el-row v-if="isupdate">
          <el-col :span="24" v-for="i in formData.contents.length">
            <el-form-item :label="`问题-${i}`">
              <el-input placeholder="请输入问卷问题" v-model="formData.contents[i-1]"/>
            </el-form-item>
          </el-col>
        </el-row>

        <!--      新增 动态添加-->
        <div v-else>
          <el-row>
            <el-col :span="24" v-for="i in contentLength">
              <el-form-item :label="`问题-${i}`">
                <el-input placeholder="请输入问题内容" v-model="formData.contents[i-1]"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="">
            <el-button type="default" @click="contentLength++">添加问题</el-button>
            <el-button type="default" @click="contentLength--">移除问题</el-button>
          </el-form-item>
        </div>
        <el-form-item label="">
          <el-button type="primary" @click="onSubmit">确定</el-button>
          <el-button type="default" @click="add_or_edit_state = false">取消</el-button>
        </el-form-item>
      </el-form>
      <!-- 内容 -->
    </el-dialog>
  </div>

</template>
